<template>
  <div>
    <h3>专题精选</h3>
    <van-swipe :loop="false" :show-indicators='false' :width="300" :height='400'  class="my-swipe" >
      <van-swipe-item v-for="item in topicListArr" :key="item.id" style="width:300px">
        <img :src="item.item_pic_url" alt="" />
        <h2>{{item.title}}</h2>
        <p>{{item.subtitle}}</p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "",
  props: ["topicListArr"],
  data() {
    return {};
  },
};
</script>

<style lang = "less" scoped>
div{
    /* display: flex; */
    /* overflow: hidden; */
}
h3{
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;
}
img{
    display: block;
    width: 100%;
    height: 200px;
    /* margin-left: 10px; */
}
h2{
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 10px;
}
p{
    font-size: 18px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.van-swipe-item{
    margin-right: 20px;
    /* height: 100px; */
}
.my-swipe{
  height: 300px;
  margin-bottom: 50px;
}

</style>